<template>
    <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
    <view class="container">
        <!-- 自定义导航栏 -->
        <view
            style="
                display: flex;
                align-items: center;
                width: 100%;
                box-sizing: border-box;
                position: fixed;
                top: 0;
                left: 0;
                padding-left: 30rpx;
                z-index: 99;
                background-color: #fff;
            "
            :style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }"
        >
            <uni-icons type="left" size="20" @click="goback"></uni-icons>
            <view style="display: flex; align-items: center">
                <view style="font-weight: bold; font-size: 36rpx; color: #151515; padding-left: 254rpx">群管理员</view>
            </view>
        </view>
        <!-- 站位盒子 -->
        <view :style="{ height: navheight + 'px', width: '100%' }"></view>
        <view class="body">
            <!-- 群管理员 -->
            <view class="chengyuan" style="padding-top: 30rpx; background-color: #fff">
                <!-- 标题 -->
                <view class="text" style="margin: 30rpx">
                    <text>群管理员 ({{list.length}}/5)</text>
                </view>
                <!-- 头像昵称 -->
                <view class="picture" style="width: 108rpx; text-align: center; margin-left: 35rpx; margin-bottom: 40rpx; display: inline-block" v-for="item in list" :key="item">
                    <image :src="$getimgsrc(item.user.avatar)" style="width: 108rpx; height: 108rpx; display: block;border-radius: 50%;"></image>
                    <text style="display: block; width: 100%; font-size: 24rpx; color: #666666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                        {{ item.user.nickname }}
                    </text>
                </view>
                <!-- 添加 -->
                <view
                    v-if="list.length <= 5"
                    @click="$refs.addPopup.open()"
                    class="picture"
                    style="width: 108rpx; text-align: center; margin-left: 35rpx; margin-bottom: 40rpx; display: inline-block"
                >
                    <image src="../../static/messageimg/d4.png" style="width: 108rpx; height: 108rpx; display: block"></image>
                    <text style="font-size: 24rpx; color: #666666">添加</text>
                </view>
                <!-- 删除 -->
                <view
                    v-if="list.length"
                    @click="$refs.removePopup.open()"
                    class="picture"
                    style="width: 108rpx; text-align: center; margin-left: 35rpx; margin-bottom: 40rpx; display: inline-block"
                >
                    <image src="../../static/messageimg/d3.png" style="width: 108rpx; height: 108rpx; display: block"></image>
                    <text style="font-size: 24rpx; color: #666666">删除</text>
                </view>
            </view>
            <!-- 权限模版 -->
            <view class="jubao" style="background-color: #fff; margin: 20rpx 0; padding: 40rpx 0 300rpx 30rpx">
                <view class="one">
                    <text>群管理员拥有以下权限：</text>
                    <text>· 修改群名称</text>
                    <text>· 发表/修改群公告</text>
                    <text>· 移除群成员</text>
                    <text>· 设置进群方式，并可同意/拒绝进群申请</text>
                </view>
            </view>
        </view>
        <!-- 添加弹层 -->
        <uni-popup ref="addPopup" type="bottom" border-radius="20px 20px 0 0" @change="change">
            <view style="width: 92%; background-color: #fff; border-radius: 30rpx 30rpx 0 0; padding: 36rpx 30rpx" :style="{ height: screenHeight * 0.8 + 'px' }">
                <!-- 顶部 -->
                <view class="top" style="width: 100%; display: flex; justify-content: space-between">
                    <text @click="$refs.addPopup.close()">取消</text>
                    <text style="font-size: 32rpx; font-weight: 700">添加群管理</text>
                    <text style="color: #37c1ff" @click="addguanli">完成</text>
                </view>
                <view style="border-bottom: 1rpx solid #e8e8e8; margin: 28rpx 0 16rpx 0"></view>
                <!-- 搜索 -->
                <view class="center" style="position: relative; background-color: #f1edf0; width: 100%; height: 68rpx; border-radius: 34rpx; display: flex">
                    <image src="../../static/messageimg/d5.png" style="width: 28rpx; height: 28rpx; position: absolute; left: 2%; top: 30%"></image>
                    <input
                        type="text"
                        placeholder="搜索"
						v-model="search_name"
						@blur="addshoushuo"
                        placeholder-style="font-size: 24rpx"
                        style="width: 86%; height: 68rpx; vertical-align: middle; margin-left: 50rpx; overflow: hidden"
                    />
                </view>
                <!-- 成员 -->
                <scroll-view :style="{ height: screenHeight * 0.7 + 'px' }" scroll-y :show-scrollbar="false">
                    <view class="bottom" style="margin-top: 40rpx; height: 100%">
                        <view style="display: flex; justify-content: space-between; margin-bottom: 30rpx" v-for="(item,index) in list_popup" :key="index">
                            <view>
                                <image  :src="$getimgsrc(item.user.avatar)"  style="width: 84rpx; height: 84rpx; vertical-align: middle;border-radius: 50%;" />
                                <text style="margin-left: 24rpx">{{ item.user.nickname }}</text>
                            </view>
                            <view style="display: flex; flex-direction: column; justify-content: center">
                                <checkbox :checked="addlist.indexOf(item) != -1" @click="adduser(item,index)" style="transform: scale(0.7)" color="#FEFF01" />
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </uni-popup>

        <!-- 移除弹层 -->
        <uni-popup ref="removePopup" type="bottom" border-radius="20px 20px 0 0" @change="change">
            <view style="width: 92%; background-color: #fff; border-radius: 30rpx 30rpx 0 0; padding: 36rpx 30rpx" :style="{ height: screenHeight * 0.8 + 'px' }">
                <!-- 顶部 -->
                <view class="top" style="width: 100%; display: flex; justify-content: space-between">
                    <text @click="$refs.removePopup.close()">取消</text>
                    <text style="font-size: 32rpx; font-weight: 700">移除群管理</text>
                    <text style="color: #37c1ff" @click="remguanli">完成</text>
                </view>
                <view style="border-bottom: 1rpx solid #e8e8e8; margin: 28rpx 0 16rpx 0"></view>
                <!-- 搜索 -->
                <view class="center" style="position: relative; background-color: #f1edf0; width: 100%; height: 68rpx; border-radius: 34rpx; display: flex">
                    <image src="../../static/messageimg/d5.png" style="width: 28rpx; height: 28rpx; position: absolute; left: 2%; top: 30%"></image>
                    <input
                        type="text"
                        placeholder="搜索"
						v-model="search_name"
						@blur="remshoushuo"
                        placeholder-style="font-size: 24rpx"
                        style="width: 86%; height: 68rpx; vertical-align: middle; margin-left: 50rpx; overflow: hidden"
                    />
                </view>
                <!-- 成员 -->
                <scroll-view :style="{ height: screenHeight * 0.7 + 'px' }" scroll-y :show-scrollbar="false">
                    <view class="bottom" style="margin-top: 40rpx; height: 100%">
                        <view style="display: flex; justify-content: space-between; margin-bottom: 30rpx" v-for="(item,index) in list" :key="item">
                            <view>
                                <image :src="$getimgsrc(item.user.avatar)" style="width: 84rpx; height: 84rpx; vertical-align: middle;border-radius: 50%;" />
                                <text style="margin-left: 24rpx">{{ item.user.nickname }}</text>
                            </view>
                            <view style="display: flex; flex-direction: column; justify-content: center">
                                <checkbox :checked="remlist.indexOf(item) != -1" @click="remuser(item,index)" style="transform: scale(0.7)" color="#FEFF01" />
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            hometop: '',
            navheight: '',
			search_name:'',
            morecaozuo: true,
            iskeybord: false,
            list: [],
            list_popup: [],
            screenHeight: '',
            show: false,
			id:null,
			addlist:[],
			remlist:[]
        };
    },
    onLoad(data) {
		this.id = data.id
		this.getuserlist()
		this.getchengyuanlist()
        uni.getSystemInfo({
            success: (res) => {
                const screenWidth = res.screenWidth;
                const screenHeight = res.screenHeight;
                console.log(res.screenWidth, res.screenHeight);
                // 根据这些尺寸进行布局计算
                this.screenHeight = res.screenHeight;
            }
        });
        const app = getApp();
        this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
        this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
    },
    methods: {
		remshoushuo(){
			this.remlist = []
			this.getuserlist()
		},
		addshoushuo(){
			this.addlist = []
			this.getchengyuanlist()
		},
		//删除管理员
		remguanli(){
			if(this.remlist.length == 0)return this.util.showToast('请选择要移除的管理员')
			let arr = []
			arr = this.remlist.map(item =>{
				return item.user.id
			})
			this.http('/group/delGroupUserAuth',{
				group_id:this.id,
				user_ids:arr.join()
			}).then(res =>{
				if(res.code == 1){
					this.util.showToast(res.msg)
					this.getuserlist()
					this.remlist = []
					this.$refs.removePopup.close();
				}
			})
		},
		//添加管理员
		addguanli(){
			if(this.addlist.length == 0)return this.util.showToast('请选择要添加的管理员')
			let arr = []
			arr = this.addlist.map(item =>{
				return item.user.id
			})
			this.http('/group/giveGroupUserAuth',{
				group_id:this.id,
				user_ids:arr.join()
			}).then(res =>{
				if(res.code == 1){
					this.util.showToast(res.msg)
					this.getuserlist()
					this.addlist = []
					this.$refs.addPopup.close();
				}
			})
		},
		//选择移除的管理
		remuser(item,index){
			if(this.remlist.indexOf(item) != -1){
				this.remlist.splice(this.remlist.indexOf(item),1)
			}else{
				this.remlist.push(item)
			}
		},
		//选择要添加的用户
		adduser(item,index){
			if(this.addlist.indexOf(item) != -1){
				this.addlist.splice(this.addlist.indexOf(item),1)
			}else{
				this.addlist.push(item)
			}
		},
		//获取群成员列表
		getchengyuanlist(){
			this.http('/group/getGroupUserList',{
				group_id:this.id,
				search_name:this.search_name
			}).then(res =>{
				this.list_popup = res.data
			})
		},
		//获取群管理
		getuserlist(){
			this.http('/group/getGroupAuthUserList',{
				group_id:this.id
			}).then(res =>{
				console.log(res);
				this.list = res.data
			})
		},
        goback() {
            uni.navigateBack();
        },
        change(e) {
            this.show = e.show;
        },
        // 添加群管理员
        addBtn() {
            this.$refs.addPopup.close();
        },
        // 移除群管理员
        removeBtn() {
            this.$refs.removePopup.close();
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    background-color: #f8f8f8;
    padding-bottom: 100rpx;
    .one {
        text {
            display: block;
            line-height: 48rpx;
            colol: #666666;
        }
    }
}
</style>
